<template>
	<a-form ref="formParamsRef" style="max-width: 600px" :model="formParams" label-width="auto" :rules="activeName === 0 ? rules : rules2">
		<a-tabs v-model="activeName" @tab-change="handleTabs">
			<a-tab-pane title="账号密码登录" :key="0">
				<a-form-item field="username" validate-trigger="blur">
					<a-input v-model="formParams.username" placeholder="请输入手机号" maxlength="11"></a-input>
				</a-form-item>
				<a-form-item field="password" validate-trigger="blur">
					<a-input v-model="formParams.password" placeholder="请输入密码" type="password"></a-input>
				</a-form-item>
			</a-tab-pane>
			<a-tab-pane title="手机号登录" :key="1">
				<a-form-item field="phone">
					<a-input v-model="formParams.phone" placeholder="请输入用户名"></a-input>
				</a-form-item>
				<a-form-item field="code" class="code-item">
					<a-input v-model="formParams.code" placeholder="请输入验证码"></a-input>
					<a-button>获取验证码</a-button>
				</a-form-item>
			</a-tab-pane>
		</a-tabs>
		<a-form-item class="forget-item">
			<div>
				<a-checkbox v-model="isAuto"/>
				<i @click="isAuto = !isAuto">自动登录</i>
			</div>
			<div>忘记密码</div>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" class="login" @click="handleLogin">登录</a-button>
		</a-form-item>
	</a-form>
</template>
<script lang="ts" setup>
import mitt from "@/utils/bus";
import { reactive } from "vue";
const isAuto = ref(false);
const activeName = ref(0);
const formParamsRef = ref(null);
const formParams = ref({
	username: '', // 账号
	password: '123456', // 密码
	// phone: '', // 手机号
	// code: '', // 验证码
})
const rules = reactive({
	username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const rules2 = reactive({
	phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
	code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

// 切换tab
const handleTabs = () => {
	let timer = setTimeout(() => {
		clearTimeout(timer);
		formParamsRef.value.resetFields();
		formParamsRef.value.clearValidate();
	}, 0)
}
// 登录
const handleLogin = async () => {
	const valid = await formParamsRef.value.validate();
    if (valid) return;
	mitt.emit('loginInfo', formParams.value);
}

</script>
<style lang="scss" scoped>
	.arco-form{
		:deep(.arco-tabs){
			margin-top: 30px;
			.arco-tabs-nav{
				&-tab{
					justify-content: center;
				}
				&::before{
					background-color: #333;
				}
			}
			.arco-tabs-tab{
				font-weight: bold;
				&:hover{
					.arco-tabs-tab-title::before{
						background-color: initial !important;
					}
				}
			}
		}
		:deep(.arco-form-item){
			.arco-form-item-label-col{
				display: none;
			}
			.arco-form-item-wrapper-col{
				width: 100% !important;
				flex: initial;
			}
			.arco-input-wrapper{
				background-color: initial;
				box-shadow:  initial;
				border: 1px solid #333;
				color: white;
			}
			&.forget-item{
				.arco-form-item-content{
					display: flex;
					justify-content: space-between;
					color: var(--blue);
					div{
						cursor: pointer;
						&:first-child{
							display: flex;
							align-items: center;
							.arco-checkbox{
								margin: 0 5px 0 -3px;
							}
						}
					}
				}
			}
			&.code-item{
				.arco-form-item-content{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.arco-input-wrapper{
						width: calc(100% - 120px);
					}
					.arco-btn{
						background-color: initial;
						border: 1px solid #333;
						height: 32px;
						line-height: 32px;
						color: white;
						font-size: 12px;
					}
				}
			}
		}
		.login{
			width: 100%;
		}
	}
</style>
